<template>
  <div class="function-info">
    <div class="title">
      <img class="icon left" :src="dou" alt="">
      <span class="text">随时随地连接线上用户，解决前端问题易如反掌！</span>
      <img class="icon right" :src="dou1" alt="">
    </div>
    <div class="info">让你能够实时掌握：运营数据、前端报错、页面性能、接口性能、以及小程序监控。</div>
    <div class="function-list" v-for="(item,index) in list" :key="index">
      <img class="function-icon" :src="item.icon" alt="">
      <div>
        <div class="function-title">{{item.title}}</div>
        <div class="sub-title">{{item.text}}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import fun1 from '~/assets/home/fun1.png'
import fun2 from '~/assets/home/fun2.png'
import fun3 from '~/assets/home/fun3.png'
import fun4 from '~/assets/home/fun4.png'
import fun5 from '~/assets/home/fun5.png'
import fun6 from '~/assets/home/fun6.png'
import dou from '~/assets/home/dou.png'
import dou1 from '~/assets/home/dou1.png'

let list = [{
  icon: fun1,
  title: '数据概览',
  text: '实时掌握项目的健康状态，PV/UV、报错、用户分布等。' }
, {
  title: '错误分析',
  icon: fun2,
  text: '精细化分析每个报错问题，支持sourceMap源码定位。'
}, {
  title: '用户细查',
  icon: fun3,
  text: '深入分析每个用户，记录用户的所有行为。'
}, {
  title: '用户连线',
  icon: fun4,
  text: '连接线上任意用户，实时查看行为和缓存数据变化。'
}, {
  title: '性能分析',
  icon: fun5,
  text: '分析页面接口的性能、加载耗时、成功率等。'
}, {
  title: '自定义埋点',
  icon: fun6,
  text: '更加灵活的自定义埋点，满足更多定制化的业务场景。'
}]

</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.function-info
  padding 55px 16px 0
  .title
    position relative
    width 270px
    margin 0 auto
    font-size 18px
    font-weight 400
    color #393F56
    line-height 25px
    text-align center
    .text
      position relative
      z-index 1
    .icon
      position absolute
      width 50px
    .left
      top -45px
      left -40px
    .right
      top -30px
      right -35px
  .info
    margin-top 16px
    font-size 14px
    font-weight 400
    color #828594
    line-height 20px
    padding-bottom 8px
  .function-list
    display flex
    width 343px
    height 109px
    padding 12px 21px 20px 12px
    background #FFFFFF
    box-shadow 0px 7px 27px 0px rgba(225, 225, 234, 0.7)
    margin-top 16px
    .function-icon
      width 60px
      height 60px
      margin-right 32px
      flex-shrink 0
    .function-title
      font-size 18px
      font-weight 500
      color #363B52
      line-height 25px
    .sub-title
      font-size 14px
      font-weight 400
      color #828594
      line-height 20px
      margin-top 8px
</style>